<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="登录账户设置" style="margin-left:450px;margin-top:30px">
            <el-form ref="userInfo" :rules="rules" :model="userInfo">
              <el-form-item label="姓名:" prop="username">
                <el-input v-model="userInfo.username" style="width:30%" />
              </el-form-item>
              <el-form-item label="密码:" prop="password2">
                <el-input v-model="userInfo.password2" style="width:30%" type="password" />
              </el-form-item>
            </el-form>
            <el-row style="margin-left:100px;margin-top:30px">
              <el-button type="primary" @click="saveUserInfo">更新</el-button>
              <el-button>取消</el-button>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="个人详情">
            <!-- component动态组件 -->
            <!--
							vue.js 内置了一种组件，component
							语法：<component :is="组件变量名" />
							组件变量名必须是一个变量（在data中定义：组件变量名：组件名）
							解释：该组件被称为动态组件，配合button使用，通过修改data中组建变量名的值， 可以实现内容之间的动态切换。
						-->
            <!-- 个人详情的打印 -->
            <el-row type="flex" justify="end">
              <el-tooltip content="打印个人基本信息">
                <router-link :to="`/employees/print/${userId}?type=personal`">
                  <i class="el-icon-printer" />
                </router-link>
              </el-tooltip>
            </el-row>
            <component :is="UserComponentInfo" />
          </el-tab-pane>
          <el-tab-pane label="岗位信息">
            <!-- 岗位信息的打印 -->
            <el-row type="flex" justify="end">
              <el-tooltip content="打印岗位信息">
                <router-link :to="`/employees/print/${userId}?type=job`">
                  <i class="el-icon-printer" />
                </router-link>
              </el-tooltip>
            </el-row>
            <component :is="JobComponentInfo" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { UserMessageAPI, saveProfileInfoAPI } from '@/api/index'
import UserInfo from '../components/user-Info.vue'
import JobInfo from '../components/job-Info.vue'
export default {
	name: 'RolesDetail',
	components: {
		UserInfo,
		JobInfo
	},
	data() {
		return {
			UserComponentInfo: 'UserInfo',
			JobComponentInfo: 'JobInfo',
			userId: this.$route.params.id, // 直接将路由中的参数，赋值给data中的属性，后期可以通过this.userId来直接使用了
			userInfo: {
				username: '', // 用户密码
				password2: ''// 用户密码
			},
			rules: {
				username: [{ required: true, message: '用户名不能为空', trigger: blur }],
				password2: [{ required: true, message: '密码不能为空', trigger: blur },
				{ min: 6, max: 16, message: '密码长度在6-16字符之间', trigger: blur }]
			}
		}
	},
	created() {
		this.getProfileData()
	},
	methods: {
		// 调用获取用户信息的接口，获取用户信息《《《《《——————————————————————————————————————
		async getProfileData() {
				this.userInfo = await UserMessageAPI(this.userId)
		},
		// 调用保存用户基本信息的接口，保存修改后的用户信息《《《《《——————————————————————————————————————
		async saveUserInfo() {
			try {
			await	this.$refs.userInfo.validate()
			await saveProfileInfoAPI({ ...this.userInfo, password: this.userInfo.password2 })
			this.$message.success('更新成功')
			} catch (err) {
				console.log(err);
			}
		}
	}
}
</script>

<style></style>